<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>雨聊</title>
    <link rel="stylesheet" href="style.css">
    <style>
      /* 页面布局 */
      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      /* 输入框和按钮 */
      .input-container {
        display: flex;
        margin-bottom: 20px;
      }

      input[type="text"] {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px;
      }

      button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
      }

      /* 聊天记录容器 */
      #infos {
        max-height: 400px;
        overflow-y: auto;
      }

      /* 聊天消息 */
      .message {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
      }

      .user-message {
        background-color: #007bff;
        color: #fff;
        align-self: flex-end;
      }

      .bot-message {
        background-color: #f0f0f0;
        color: #333;
        align-self: flex-start;
      }

      /* 手机屏幕适配 */
      @media (max-width: 600px) {
        .container {
          max-width: 100%;
          padding: 10px;
        }

        .input-container {
          flex-direction: column;
        }

        input[type="text"] {
          border-radius: 5px;
          margin-bottom: 10px;
        }

        button {
          border-radius: 5px;
        }

        #infos {
          max-height: 300px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="infos"></div>
      <div class="input-container">
        <input type="text" placeholder="请输入聊天内容" />
        <button onclick="fetchChatCompletion()">获取聊天回复</button>
      </div>
    </div>
    <script>
      // 页面加载时添加初始聊天记录
      window.onload = function () {
        var initialContentHtml = `
                <div class="message user-message">
                    <p>你：你好</p>
                </div>
                <div class="message bot-message">
                    <p>诗意回复：你好，很高兴与你交流。</p>
                    <p>有趣回复：你好呀，有什么我可以帮助你的吗？</p>
                    <p>调侃回复：你好，你看起来心情不错哦。</p>
                    <p>生活回复：你好，今天过得怎么样？</p>
                </div>
            `;
        document.querySelector("#infos").innerHTML = initialContentHtml;
      };
    </script>
    <script src="index.js"></script>
  </body>
</html>
